<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'

	const router = useRouter()
	const route = useRoute()

	const tableData = ref([{
		name: 'xabntih.cn',
		access: '通道①',
		price: 470,
		freeze: 50,
		delete_type: 'Delete',
		delete_time: '2024-11-04',
		booking_time: '2024-11-04 16:30:30',
		status: 0
	}, {
		name: 'xabntih.cn',
		access: '通道①',
		price: 470,
		freeze: 50,
		delete_type: 'Delete',
		delete_time: '2024-11-04',
		booking_time: '2024-11-04 16:30:30',
		status: 1
	}, {
		name: 'xabntih.cn',
		access: '通道①',
		price: 470,
		freeze: 50,
		delete_type: 'Delete',
		delete_time: '2024-11-04',
		booking_time: '2024-11-04 16:30:30',
		status: 2
	}, {
		name: 'xabntih.cn',
		access: '通道①',
		price: 470,
		freeze: 50,
		delete_type: 'Delete',
		delete_time: '2024-11-04',
		booking_time: '2024-11-04 16:30:30',
		status: 3
	}, {
		name: 'xabntih.cn',
		access: '通道①',
		price: 470,
		freeze: 50,
		delete_type: 'Delete',
		delete_time: '2024-11-04',
		booking_time: '2024-11-04 16:30:30',
		status: 4
	}, {
		name: 'xabntih.cn',
		access: '通道①',
		price: 470,
		freeze: 50,
		delete_type: 'Delete',
		delete_time: '2024-11-04',
		booking_time: '2024-11-04 16:30:30',
		status: 5
	}, {
		name: 'xabntih.cn',
		access: '通道①',
		price: 470,
		freeze: 50,
		delete_type: 'Delete',
		delete_time: '2024-11-04',
		booking_time: '2024-11-04 16:30:30',
		status: 6
	}, {
		name: 'xabntih.cn',
		access: '通道①',
		price: 470,
		freeze: 50,
		delete_type: 'Delete',
		delete_time: '2024-11-04',
		booking_time: '2024-11-04 16:30:30',
		status: 4
	}, {
		name: 'xabntih.cn',
		access: '通道①',
		price: 470,
		freeze: 50,
		delete_type: 'Delete',
		delete_time: '2024-11-04',
		booking_time: '2024-11-04 16:30:30',
		status: 4
	}, {
		name: 'xabntih.cn',
		access: '通道①',
		price: 470,
		freeze: 50,
		delete_type: 'Delete',
		delete_time: '2024-11-04',
		booking_time: '2024-11-04 16:30:30',
		status: 4
	}])

	const placeholder = "查找域名/后缀 如：.cn \r多个域名/后缀用换行分隔"

	const dmName = ref(false)

	const dmFocus = () => {
		dmName.value = true
	}
	const dmBlur = () => {
		dmName.value = false
	}
	const handleSizeChange = (val) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}`)
	}

	const form = reactive({})

	const multipleSelection = ref([])

	const currentPage = ref(1)
	const total = 1000

	const reset = () => {
		form.delete_type = ''
		form.delete_time = ''
		form.status = ''
		form.nameStr = ''
	}

	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	const domainClick = () => {
		router.push('/my-domains-details')
	}
</script>
<template>
	<div class="container">
		<div class="top-title">
			我的预订
		</div>
		<div class="top-area flex-between">
			<div class="area-item">
				<div class="area-item-left">
					<i class="iconfont icon-yuding"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">预订中</div>
					<div class="area-item-val">3</div>
				</div>
			</div>
			<div class="area-item">
				<div class="area-item-left">
					<i class="iconfont icon-paimai"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">竞价中</div>
					<div class="area-item-val">17</div>
				</div>
			</div>
			<div class="area-item">
				<div class="area-item-left">
					<i class="iconfont icon-success"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">成功得标</div>
					<div class="area-item-val">36</div>
				</div>
			</div>
			<div class="area-item">
				<div class="area-item-left">
					<i class="iconfont icon-caidan"></i>
				</div>
				<div class="area-item-content">
					<div class="area-item-label">总预订</div>
					<div class="area-item-val">209</div>
				</div>
			</div>
		</div>
		<div class="table-box">
			<div class="table-tool">
				<div class="tool-left">
					<el-button @click="reset">重置条件</el-button>
					<el-button type="warning">添加预订</el-button>
				</div>
				<div class="tool-right">
					<div class="wrapdmTextarea">
						<div class="textarea-warp" style="z-index: 200; top: 0;">
							<div class="textarea-suffix">
								<img src="../../assets/img/search.png" alt="" />
							</div>
							<textarea id="textarea" :placeholder="placeholder" class="ui-input dmTextarea" name="domain"
								@focus="dmFocus" @blur="dmBlur" :class="dmName ? 'dmTyping' : ''"
								style="overflow-y: auto;" v-model="form.nameStr"></textarea>
						</div>
					</div>
				</div>
			</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
				<el-table-column prop="name" label="域名" width="180">
					<template #default="scope">
						<el-link><span class="warn">{{scope.row.name}}</span></el-link>
					</template>
				</el-table-column>
				<el-table-column prop="access" label="抢注通道"></el-table-column>
				<el-table-column prop="price" label="抢注价格（元）" align="center" width="180">
					<template #default="scope">
						{{scope.row.price}} （已冻结{{scope.row.freeze}}元）
					</template>
				</el-table-column>
				<el-table-column prop="delete_type" align="center" width="150">
					<template #header>
						<el-select v-model="form.delete_type" placeholder="删除类型" style="width: 120px" clearable>
							<el-option label="Delete" value="Delete"></el-option>
							<el-option label="190-Pre" value="190-Pre"></el-option>
							<el-option label="Ename-Pre" value="Ename-Pre"></el-option>
							<el-option label="GD-Pre" value="GD-Pre"></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="delete_time" align="center" width="180">
					<template #header>
						<el-date-picker v-model="form.delete_time" type="date" placeholder="删除日期" clearable
							style="width: 140px" />
					</template>
				</el-table-column>
				<el-table-column prop="booking_time" label="预订时间" sortable align="center" width="180"></el-table-column>
				<el-table-column prop="status" width="150">
					<template #header>
						<el-select v-model="form.status" placeholder="状态" style="width: 120px" clearable>
							<el-option label="预订中" :value="0"></el-option>
							<el-option label="抢注失败" :value="1"></el-option>
							<el-option label="直接得标" :value="2"></el-option>
							<el-option label="竞价中" :value="3"></el-option>
							<el-option label="竞价得标" :value="4"></el-option>
							<el-option label="竞价失标" :value="5"></el-option>
							<el-option label="已赎回" :value="6"></el-option>
						</el-select>
					</template>
					<template #default="scope">
						<span v-if="scope.row.status == 0" class="warn">预订中 <a class="status-btn">查看</a></span>
						<span v-if="scope.row.status == 1" class="error">抢注失败</span>
						<span v-if="scope.row.status == 2" class="success">直接得标</span>
						<span v-if="scope.row.status == 3" class="warn">竞价中 <a class="status-btn">出价</a></span>
						<span v-if="scope.row.status == 4" class="success">竞价得标</span>
						<span v-if="scope.row.status == 5">竞价失标</span>
						<span v-if="scope.row.status == 6">已赎回</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="pager-box">
				<div class="pager-total">搜索结果共{{total}}条，<a>点击这里</a>导出</div>
				<el-pagination v-model:current-page="currentPage" :page-size="50" :background="true"
					:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<style scoped lang='scss'>
	.table-box {
		background: #FFFFFF;
		box-shadow: 0px 0px 14px 0px #00000017;
		border-radius: 10px;
		padding: 20px;
		margin-bottom: 20px;
	}

	.status-btn {
		cursor: pointer;
		color: rgb(0, 0, 255);
		margin-left: 15px;
	}

	.status-btn:hover {
		text-decoration: underline;
	}
</style>